<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <input v-focus v-border type="text" placeholder="请输入">
            <h3 v-demo></h3>
        </div>
    </div>
    <script>
        //全局注册指令
        Vue.directive("focus", {
            inserted(el) {
                //el表示指令操作的DOM
                el.focus();
            },
        });
        Vue.directive('demo', {
            bind(el, binding, vnode) {
                el.innerHTML='武汉你好'
            },
            inserted(el, binding, vnode) {},
            update(el, binding, vnode, oldVnode) {},
            componentUpdated(el, binding, vnode) {},
            unbind(el, binding, vnode) {},
        });
        let vm = new Vue({
            //局部注册指令 局部后面要加s
            directives: {
                border: {
                    inserted(el) {
                        el.style.border = '1px solid #fda'
                    }
                }
            },
            data: {
                title: 'directive'
            }
        }).$mount('#app');



    </script>
</body>

</html>